<template>
    <div class="shopCar_container">
        <div class="mui-card" v-for="(item, index) in goodList" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch v-model="$store.getters.getSelected[item.id]" @change="updateSelect(item.id,$store.getters.getSelected[item.id])"></mt-switch>
                    <img :src="item.img" alt="">
                    <div class="info">
                        <p>
                            <span class="title">{{item.title}}</span>
                        </p>
                        <p>
                            <span class="price">￥{{item.price}}</span>
                            <numbox :currentValue="item.count" :id="item.id"></numbox>
                            <span class="del" @click="del(item.id,index)">删除</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div>
                        <p>总计(不含运费)</p>
                        <p>已选购<span class="shop_count">{{$store.getters.getTotalCountAndTotalprice.count}}</span>件,总价:<span class="totalPrice">￥{{$store.getters.getTotalCountAndTotalprice.price}}</span></p>
                    </div>
                    <mt-button type="primary" size="small">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import numbox from "../subComponent/shopCar_numbox.vue"
export default {
    data(){
        return {
            goodList:[]
        }
    },
    created(){
        this.getGoodList();
    },
    methods:{
        getGoodList(){
            let that = this
            //获取购物车中商品id,请求后台数据，加载购物车的完整数据
            let arr = [];

            this.$store.state.car.forEach(item => {
                let obj = {}
                obj.id = item.id;
                obj.count = item.count;
                obj.price = item.price;
                arr.push(obj);
            });
            if(arr.length > 0){
                arr.forEach(item => {
                    item.title = "苹果6plus玫瑰金限量版";
                    item.img = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1159631041,330735827&fm=26&gp=0.jpg",
                    that.goodList.push(item)
                })
            }
        },
        del(id,index){
            //删除数据列表中的数据，使用索引值
            this.goodList.splice(index,1);
            //删除store中的值，通过id
            this.$store.commit("deltoCar",id);
        },
        updateSelect(id,flag){
            this.$store.commit("updateSelect",{id:id,selected:flag});
        }
        
    },
    components:{
        numbox
    }
}
</script>

<style lang="less" scoped>
.shopCar_container{
    .mui-card-content-inner{
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title{
        font-size: 13px;
        color: black;
        font-weight: bold;
        }
        .price{
            font-size: 12px;
            color: red;
        }
        .del{
            color: blue;
        }
        img{
            width: 50px;
            height: 50px;
        }
        .shop_count,.totalPrice{
            font-size: 16px;
            font-weight: 700;
            color: red;
        }
    }
    
}
</style>
